<!-- 角色管理  获取角色权限 后台还没有统一 还是用的axios 原方法 -->
<template>
  <el-container class="page">
    <el-row
      class="page-search"
      v-if="$getAuth('sysRole:list')"
      title="点击右边按钮，展开搜索条件查询器"
    >
      <el-col :span="21" style="min-height:1px;">
        <ul class="search-list">
          <li v-for="item in searchTerm" :key="item.key" class="search-item">
            <label class="search-label">{{ item.label }}:</label>
            <el-input
              v-model="item.value"
              :label="item.label"
              size="small"
              placeholder="请输入查询条件"
              @keyup.native.enter="onSubmitSearchRole"
            >
            </el-input>
          </li>
        </ul>
      </el-col>
      <el-col :span="2" class="search-btns" style="min-height:1px;">
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-search"
          @click="onSubmitSearchRole"
          >查询</el-button
        >
        <el-button
          size="mini"
          icon="el-icon-delete"
          style="margin:10px 0 0 ;"
          @click="onCanleSearch"
          >清空</el-button
        >
      </el-col>
    </el-row>

    <el-row class="page-fun">
      <el-col>
        <el-button
          v-if="$getAuth('sysRole:addRole')"
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="onCreateRoleDialog"
          >添加角色</el-button
        >
      </el-col>
    </el-row>
    <main class="page-main" v-loading="loading">
      <el-scrollbar class="el-scrollbar-vertical">
        <el-table
          border
          :data="roleList"
          :row-style="setTableRowStyle"
          @row-click="onHandleViewRole"
        >
          <el-table-column
            fixed
            label="序号"
            prop="index"
            type="index"
          ></el-table-column>
          <el-table-column label="角色名称" width="140px" prop="roleName">
          </el-table-column>
          <el-table-column
            label="角色说明"
            prop="description"
          ></el-table-column>
          <el-table-column
            label="角色所在公司"
            width="120px"
            prop="companyName"
          >
            <template slot-scope="scope">{{ scope.row.companyName }}</template>
          </el-table-column>
          <el-table-column label="角色创建时间" prop="createTime">
            <template slot-scope="scope">{{ scope.row.createTime }}</template>
          </el-table-column>
          <el-table-column width="240px" label="操作">
            <template slot-scope="scope">
              <div class="btn-opers">
                <el-link
                  :underline="false"
                  v-if="$getAuth('sysRole:rolePermission')"
                  type="warning"
                  @click.stop="
                    onHandleSetRole(scope.row.roleName, scope.row.id)
                  "
                >
                  设置权限
                </el-link>
                <el-link
                  :underline="false"
                  v-if="$getAuth('sysRole:updateRole')"
                  @click.stop="onHandleEditRole(scope.row.id)"
                  >编辑</el-link
                >
                <el-link
                  :underline="false"
                  v-if="$getAuth('sysRole:deleteRole')"
                  :type="scope.row.delFlag ? 'primary' : 'danger'"
                  @click.stop="
                    onHandleDeleteRole(scope.row.id, scope.row.delFlag)
                  "
                  >{{ scope.row.delFlag ? '启用' : '禁用' }}</el-link
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
      <div class="pager">
        <el-pagination
          background
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total,sizes,prev,pager,next,jumper"
          :total="roleListTotal"
          @size-change="onHandleSizeChange"
          @current-change="onHandleCurrentChange"
        ></el-pagination>
      </div>
    </main>

    <td-layer
      top="10vh"
      width="850px"
      :visible.sync="dialogBoolean"
      :close-on-click-modal="false"
      :before-close="onCloseRoleDialog"
      :title="
        dialogTitleNum > 0
          ? '编辑角色'
          : dialogTitleNum < 0
          ? '查看'
          : '新建角色'
      "
    >
      <form-role
        :isEdit="dialogTitleNum"
        :roleId="roleId"
        @onSubmit="formRoleSubmit"
      ></form-role>
    </td-layer>

    <td-layer
      top="6vh"
      width="850px"
      :visible.sync="dialogPowerBoolean"
      title="设置角色菜单权限"
      :close-on-click-modal="false"
      :before-close="onCloseMenuDialog"
    >
      <form-menu
        :roleName="roleName"
        :roleId="roleId"
        @onSubmit="formMenuSubmit"
      ></form-menu>
    </td-layer>
  </el-container>
</template>

<script>
import { roleManage, menuManage } from '@/api'
import { getCookie } from '@/utils/cookie'
import formRole from './formRole'
import formMenu from './formMenu'

import { debounce } from '@/utils/utils'

export default {
  name: 'role_mangage',
  componentName: 'roleMangage',
  components: { formRole, formMenu },
  data() {
    return {
      loading: false,
      dialogBoolean: false,
      roleName: null,
      roleId: null,
      dialogTitleNum: 0, // -1 查看 0 新建 1 编辑

      dialogPowerBoolean: false, //  角色权限设置
      currentPage: 1,
      pageSizes: [10, 20, 50],
      pageSize: 10,
      roleList: [],
      roleListTotal: 0,
      searchForm: {
        roleName: ''
      },
      searchTerm: [
        {
          label: '角色名',
          key: 'roleName',
          value: ''
        }
      ]
    }
  },
  watch: {
    searchTerm: {
      handler(newV, oldV) {
        console.log(newV)
        for (let i = 0; i < newV.length; i++) {
          this.searchForm[newV[i]['key']] = newV[i]['value']
        }
      },
      deep: true
    }
  },
  methods: {
    setTableRowStyle({ row, rowIndex }) {
      return { cursor: 'pointer' }
    },
    // 获取角色列表
    async getRoleList() {
      this.loading = true
      try {
        const role = await roleManage.selectRoleList({
          page: this.currentPage,
          pageSize: this.pageSize,
          param: this.searchForm
        })
        this.roleListTotal = role.data.total
        this.roleList = role.data.list
        this.loading = false
      } catch {
        this.loading = false

        this.$message.error({
          // message: '噢，发现错误，联系后台管理员',
          duration: 2000
        })
      }
    },

    // 清空search
    onCanleSearch() {
      for (let i = 0; i < this.searchTerm.length; i++) {
        this.searchTerm[i]['value'] = ''
      }
      this.getRoleList()
    },
    onSubmitSearchRole: debounce(
      function() {
        this.currentPage = 1
        this.getRoleList()
      },
      1000,
      true
    ),
    // ** 新建角色 打开dialog
    onCreateRoleDialog() {
      this.dialogBoolean = true
      this.dialogTitleNum = 0
    },
    // 关闭dialog
    onCloseRoleDialog() {
      this.dialogBoolean = false
      this.dialogTitleNum = 0
      this.roleId = null
    },
    // dialog 提交按钮事件
    formRoleSubmit(bool) {
      if (bool) {
        this.getRoleList()
      }
      this.onCloseRoleDialog()
    },
    //查看
    onHandleViewRole(row, cloumn, event) {
      this.dialogTitleNum = -1
      this.dialogBoolean = true
      this.roleId = row.id
    },
    // 打开编辑
    onHandleEditRole(id) {
      this.dialogTitleNum = 1
      this.dialogBoolean = true
      this.roleId = id
    },
    // ** 新建角色 end
    //删除角色
    onHandleDeleteRole(id, delFlag) {
      this.$confirm(`您确定要${delFlag ? '启用' : '禁用'}此角色?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(() => {
          roleManage
            .deleteRole({ id, delFlag: delFlag ? 0 : 1 })
            .then(res => {
              if (res.code === 200) {
                this.$message.success({
                  message: res.message === 'ok' ? '修改状态成功' : res.message,
                  duration: 2000
                })
                this.getRoleList()
              }
            })
            .catch(err => {
              this.$message.success({
                message: '噢，发现错误，联系后台管理员',
                duration: 2000
              })
            })
        })
        .catch(() => {})
    },

    //  获取角色权限
    onHandleSetRole(name, id) {
      this.roleName = name
      this.roleId = id
      this.dialogPowerBoolean = true
    },
    formMenuSubmit(bool) {
      if (bool) {
        this.getRoleList()
      }
      this.onCloseMenuDialog()
    },
    // 关闭menu dialog
    onCloseMenuDialog() {
      this.dialogPowerBoolean = false
      this.roleName = null
      this.roleId = null
    },

    // 单页条数 select
    onHandleSizeChange(value) {
      this.pageSize = value
      this.getRoleList()
    },
    // 翻页动作
    onHandleCurrentChange(value) {
      this.currentPage = value
      this.getRoleList()
    }
  },
  created() {
    this.getRoleList()
  }
}
</script>
<style lang="scss" scoped>
$c-active: #ddd;

.page {
  height: 100%;
  flex-direction: column;
  .page-search {
    padding-bottom: 20px;
    margin-bottom: 12px;
    border-bottom: 1px solid $c-active;
    justify-content: center;
    align-items: center;

    .search-item {
      width: 33%;
      float: left;
      padding: 5px 10px;
      box-sizing: border-box;
      .search-label {
        width: 70px;
        text-align: right;
        margin-right: 4px;
        display: inline-block;
        font-size: 14px;
      }
      & /deep/ .el-input {
        width: calc(100% - 75px);
      }
    }
    .search-btns {
      display: flex;
      flex-direction: column;
    }
  }
  .page-fun {
    height: 40px;
    margin: 0 20px 12px 0;
    padding-top: 7px;
    box-sizing: border-box;
  }
  main {
    .pager {
      text-align: center;
      margin: 60px 0;
    }
  }
  // .page 页面下el-dialog el-scrollbar
  .el-dialog {
    // horizontal
    .el-scrollbar-vertical {
      height: 50vh;
      & /deep/ .el-scrollbar__wrap {
        overflow-x: hidden;
      }
    }
  }
  .page-pagination {
    height: 40px;
  }
}
</style>
